<template>
  
    <div>
        
    <template>
        <div class="condition-vxe-box">
            <vxe-form :data="formData" @submit="searchEvent" @reset="resetEvent" v-if="formItem.length">
                <vxe-form-item v-for="(item,index) in formItem" field="name" :title="item.label+':'" :key="index">
                    <template #default="{ data }" v-if="!item.type">
                                        <vxe-input v-if="!item.slotName" v-model="data[item.model]" type="text" :placeholder="item.placeholder?item.placeholder:'请输入'+item.label"></vxe-input>
                                        <slot v-else :name="item.slotName" :data="data" ></slot>
                    </template>
                </vxe-form-item>
                <vxe-form-item>
                <template>
                    <vxe-button type="submit" status="primary" content="查询"></vxe-button>
                    <vxe-button type="reset" content="重置"></vxe-button>
                </template>
            </vxe-form-item>
            </vxe-form>
        </div>
    </template>    

    <vxe-toolbar ref="xToolbar" >
      <template #buttons>
        <div class="headerToolBar">
            <a-button class="blue-btn" type="primary" @click="addType()">新增</a-button>
        </div>
      </template>
    </vxe-toolbar>
    

    <vxe-table
      show-overflow
      keep-source
      ref="tableRef"
      :row-config="{keyField: 'id'}"
      :column-config="{resizable: true}"
      :loading="loading"
      :tree-config="{transform: true, rowField: 'id', parentField: 'fparentid'}"
      :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
      :data="tableData">
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column field="flxmc" title="分类名称" tree-node></vxe-column>
      <vxe-column field="forder" title="序号">
      </vxe-column>
      <vxe-column title="操作" width="500">
        <template #default="{ row }">
            <a-form layout="inline" >
                    <a-form-item>
                        <a-button class="blue-btn" type="primary" @click="addNextType(row)">新增下级</a-button>
                    </a-form-item>

                    <a-form-item>
                        <a-button class="blue-btn" type="primary" @click="editType(row)" >编辑</a-button>
                    </a-form-item>

                    <a-form-item >
                        <a-button class="red-btn" type="primary" @click="delType(row)" >删除</a-button>
                    </a-form-item>
                </a-form>
        </template>
      </vxe-column>
    </vxe-table>

    <increase ref="refModel" :addEditParameter="addEditParameter" @handleOk="handleOk"/>

    </div>

</template>

<script>

import assessCheckApi from './service/api'
import { queryPageList, deleteType } from "./service/index"
import increase from './increase.vue'
export default {
    components: {
        increase
    },
    props: {

    },
    watch: {},
    data() {
        return {
            formItem:[
                {
                    label: '分类名称',
                    model: 'flxmc',
                }
            ],
            // vue-table
            formData: {},
            loading: false,
            addEditParameter: {},
            tableData: []
        }
    },
    methods: {
        // 刷新
        searchMethod(){
            this.getList({...this.formData});
        },
        // //查询
        searchEvent () {
            this.getList({...this.formData});
            
        },
        // //重置
        resetEvent () {
            this.formData = {};
            this.getList();
        },

        // 弹框ok
        handleOk(val,id){
            if(val && !id){
                this.searchMethod(); // 刷新
            }else if(val && id){
                this.searchMethod(); // 刷新
            }
            
        },

        // 新增
        addType () {
            this.$refs.refModel.visibleShow = true
            this.addEditParameter = {}
        },

        // 新增下级
        addNextType (row) {
            this.addEditParameter = {
                fparentid: row.id,
                fsjfl: row.flxmc
            }
            this.$refs.refModel.visibleShow = true
        },

        // 编辑
        editType (row) {
            this.addEditParameter = {
                id: row.id,
                fparentid: row.fparentid,
                flxmc: row.flxmc,
                forder: row.forder
            }
            this.$refs.refModel.visibleShow = true
        },

        // 删除
        delType (row) {

            var that = this
            this.$confirm({
                title:'您确认要删除['+row.flxmc+']吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    deleteType({id: row.id}).then(res => {
                        if (res.code == 200) {
                            that.$message.success(res.message);
                        } else {
                            that.$message.error(res.message);   
                        }
                        that.searchMethod(); // 刷新
                    })  
                }
            })

        },

        // 查询数据表格
        getList (params) {
            this.loading = true;
            queryPageList(params).then(res => {
                if(res.code == 200){
                this.tableData = res.result;
                this.loading = false;
                }
            })
        }
    },
    mounted() {},
    created() {
        this.getList();
    },
    updated() {}
}
</script>

<style lang="less">

.blue-btn{
  border: 1px solid #5ca3e5 !important;
  background-color: #5ca3e5 !important;
  color: #fff !important;
}

.red-btn{
  border: 1px solid #ed5565 !important;
  background-color: #ed5565 !important;
}

.condition-vxe-box{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin:0 0px;
}

.vxe-form--item-title-content{
    padding-left: 10px;
}

.headerToolBar{
    width: 100%;
    display: flex;
    margin:0 0px;
    padding-left: 20px;
}
</style>